<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000" type="transparentFixed">权益包详情</z-nav-bar>
		</view>
		
		<!-- 详情轮播图 -->
		<view v-if="equityDetail && equityDetail">
			<u-swiper current="0" :autoplay="false" :list="equityDetail.bannerImageList" height="500" bgColor="#FFFFFF"></u-swiper>
		</view>
		
		<view style="position: relative; top: -110rpx;" v-if="equityDetail && equityDetail && !isShowSkeleton">
			<view class="bg-1 u-p-t-40" style="padding-bottom: 120rpx;">
				<view class="u-m-l-70 u-flex">
					<view class="u-flex-4">
						<view>
							<text class="u-font-40 text-bold">¥</text>
							<u-count-to :duration="countDuration" :startVal="0" :endVal="formatMoney(equityDetail.sellPrice)" separator="," color="#000000" fontSize="34" bold decimals="0"></u-count-to>
						</view>
					</view>
					<view class="u-flex-8 u-m-l-30 u-font-22 u-text-center u-m-r-30">
						<view>
							<text class="u-font-42 text-bold">{{equityDetail.equityName}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-2 u-p-t-10" style="margin-top: -90rpx;box-shadow: 0rpx 2rpx 20rpx #E8E9EA;">
				<view class="u-m-l-70 u-m-t-40 u-p-b-30">
					<view class="u-flex">
						<view class="u-flex-11">
							<text class="text-bold u-font-30">产品规格</text>
						</view>
						<view class="u-flex-1">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<view class="u-m-t-30">
						<view class="u-flex">
							<view class="u-flex-2">
								<text style="opacity: 0.5;">配送</text>
							</view>
							<view class="u-flex-10">
								<text class="">免运费</text>
							</view>
						</view>
						<view class="u-flex u-m-t-10">
							<view class="u-flex-2">
								<text style="opacity: 0.5;">优惠</text>
							</view>
							<view class="u-flex-10">
								<view class="u-line-1">
									<text class="">{{equityDetail.equityShortName}}</text>
								</view>
							</view>
						</view>
						<view class="u-flex u-m-t-10">
							<view class="u-flex-2">
								<text style="opacity: 0.5;">服务</text>
							</view>
							<view class="u-flex-10 u-flex">
								<view v-for="(item, index) in equityDetail.servers" :key="index">
									<text class="">{{item.serverName}}</text>
									<text class="u-m-l-10 u-m-r-10" v-if="index < equityDetail.servers.length - 1">|</text>
								</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
			
			<view class="u-m-t-20">
				<view style="margin-top:-10rpx" v-for="(item, index) in equityDetail.detailImageList" :key="index">
					<image :src="item" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			
			<view class="u-p-40" v-if="equityDetail.remark">
				<view class="u-flex" @click="handleShowRemark()">
					<view class="u-flex-1">
						<text class="u-font-34 text-bold">权益包使用规则</text>
					</view>
					<view class="u-flex-1 u-flex u-flex-end">
						<u-icon name="arrow-up" size="16" v-if="equityDetail.isShowRemark"></u-icon>
						<u-icon name="arrow-down" size="16" v-else></u-icon>
					</view>
				</view>
				<view class="u-m-t-20" v-show="equityDetail.isShowRemark">
					<u-parse :content="equityDetail.remark"></u-parse>
				</view>
			</view>
			
			<view class="u-m-l-30 u-p-t-40 u-m-b-40 u-m-t-40" style="box-shadow: 0rpx 2rpx 40rpx #E8E9EA;border-radius: 30rpx 0rpx 0rpx 30rpx;">
				<view class="u-p-l-40">
					<text class="text-bold u-font-30">更多精选商品</text>
				</view>
				
				<view class="u-m-t-40 u-p-l-40">
					<HotGoodsSku ref="hotGoodsSkuRef" model="horizontal" isShowSku></HotGoodsSku>
				</view>
			</view>
			
		</view>
		
		
		<view slot="bottom">
			<view class="u-p-20 u-flex bg-white">
				<view class="u-flex-1 u-text-center">
					<button open-type="contact" plain hover-class="none" size="mini" style="border: 0px;">
						<u-icon name="server-fill" size="28"></u-icon>
					</button>
					<view class="u-font-22 u-p-t-5">客服</view>
				</view>
				<view class="u-flex-2 u-flex u-flex-end">
					<u-button text="立即购买" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}" @click="handleSubmit"></u-button>
				</view>
			</view>
		</view>	
		
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, payChannelEnum, orderTypeEnum} from '@/common/const.js'
	import {getShopEquityDetail} from '@/api/equity.js'
	import HotGoodsSku from '@/components/hot_goods_sku/index.vue'
	import {mapGetters} from 'vuex'
	import {create, pay} from '@/api/order.js'
	
	export default{
		data(){
			return{
				orderTypeEnum,
				id:'',
				equityDetail:null,
				isShowSkeleton:true,
				countDuration:1,
			}
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		components:{
			HotGoodsSku
		},
		computed:{
			...mapGetters(['isLogin','platform']),
		},
		methods:{
			
			init(){
				this.reload()
				this.shareMenuStatus()
			},
			
			/**
			 * 判断是否可以分享
			 */
			shareMenuStatus(){
				if(this.isLogin){
					console.log("打开分享")
					uni.showShareMenu({
						menus: ['shareAppMessage', 'shareTimeline']
					})
				} else {
					console.log("关闭分享")
					uni.hideShareMenu({
						
					})
				}
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询数据
			 */
			queryList(pageNo, pageSize){
				getShopEquityDetail({
					id: this.id
				}).then(res=>{
					let data = res.data
					this.formatData(data)
					// 设置商品信息
					this.equityDetail = data
					this.$set(this.equityDetail, 'isShowRemark', true)
					// 加载热销商品
					this.$nextTick(()=>{
						this.$refs.hotGoodsSkuRef.init()
					})
					
					this.isShowSkeleton = false
					this.$refs.paging.complete([]);
				}).catch(res => {
					this.isShowSkeleton = false
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 格式化数据
			 */
			formatData(data){
				let imageList = JSON.parse(data.bannerImages)
				let images = []
				imageList.forEach(item=>{
					images.push(item.materialUrl)
				})
				
				// 获取sku轮播图
				if(!data.hasOwnProperty('bannerImageList')){
					this.$set(data, 'bannerImageList', images.slice(1))
				} else {
					data.bannerImageList = images.slice(1)
				}
				// 还原成图片地址
				data.bannerImages = images.join()
				
				imageList = JSON.parse(data.detailImages)
				images = []
				imageList.forEach(item=>{
					images.push(item.materialUrl)
				})
				// 获取sku详情图片
				if(!data.hasOwnProperty('detailImageList')){
					this.$set(data, 'detailImageList', images)
				} else {
					data.detailImageList = images
				}
				// 还原成图片地址
				data.detailImages = images.join()
				
			},
			
			/**
			 * 分转元
			 */
			formatMoney(val){
				return this.formatMoneyToYuan(val)
			},
			
			/**
			 * 创建订单
			 */
			handleSubmit(){
				
				// 未登录的场合
				if(!this.isLogin){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/login/index`, false)
					return
				}
				
				// 创建订单
				let data = {
					platform: this.platform,
					walletPrice:0,
					sourceOrderPrice:this.equityDetail.sellPrice,
					orderPrice:this.equityDetail.sellPrice,
					orderType: orderTypeEnum.equity,	// 商品订单
					skuDetails:[]
				}
				
				// 获取sku
				data.skuDetails.push({
					skuId: this.equityDetail.id,
					spuId:this.equityDetail.id,
					spuTitle: this.equityDetail.equityName,
					bannerImages: this.equityDetail.bannerImages,
					buyCount: 1
				})
				
				// #ifdef MP-WEIXIN
				// 获取openId
				this.$store.dispatch("getOpenId", {isSave: false}).then(res=>{
					const openId = JSON.parse(res.data).openid
					// 创建订单
					create(data).then(res=>{
						let data = res.data
						let params = {
							orderId: data.id,
							totalPoint: data.totalPoint,
							totalFirstProfit: data.totalFirstProfit,
							totalSecondProfit: data.totalSecondProfit
						}
						pay({
							id: params.orderId,
							openId: openId,
							orderPrice: data.orderPrice
						}).then(res=>{
							this.wechatPay(res.data,params)
						})
						//
					})
				})
				// #endif
				
				// #ifdef H5
				console.log(data)
				// 创建订单
				create(data).then(res=>{
					let data = res.data
					let params = {
						orderId: data.id,
						totalPoint: data.totalPoint,
						totalFirstProfit: data.totalFirstProfit,
						totalSecondProfit: data.totalSecondProfit
					}
					this.jumpUtil.jumpTo(jumpTypeEnum.redirect, `/pages_one/order/finish?params=${encodeURIComponent(JSON.stringify(params))}`, true)
				})
				// #endif
			},
			
			/**
			 * 小程序支付
			 */
			wechatPay(payParams, params){
				let that = this
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					timeStamp: payParams.timeStamp, // 时间戳
					nonceStr: payParams.nonceStr, // 随机字符串
					package: payParams.package,
					signType: payParams.signType, // 签名算法
					paySign: payParams.sign, // 签名
					success: function (res) {
						console.log('支付成功',res);
						//that.clearCustomShoppingCart()
						// 业务逻辑。。。
						that.jumpUtil.jumpTo(jumpTypeEnum.redirect, `/pages_one/order/finish?params=${encodeURIComponent(JSON.stringify(params))}`, true)
					},
					fail: function (err) {
						console.log('支付失败',err);
						that.jumpUtil.jumpTo(jumpTypeEnum.redirect, `/pages_one/order/detail?orderId=${params.orderId}`, true)
					}
				});
			},
			
			
			/**
			 * 显示备注
			 */
			handleShowRemark(){
				this.equityDetail.isShowRemark = !this.equityDetail.isShowRemark
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style scoped>
	.bg-1{
		background-image: linear-gradient(to right, #FFB143, #FFECBF);
		/* height: 300rpx; */
		width: 100%;
		border-radius: 110rpx 0rpx 0rpx 0rpx;
	}
	
	.bg-2{
		background-color: #FFFFFF;
		/* height: 300rpx; */
		width: 100%;
		border-radius: 110rpx 0rpx 0rpx 0rpx;
	}
</style>